import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface GaugeRingProps {
    chartId?: string;
    width?: string;
    height?: string;
    thick?: number;
    gaugeData?: any[];
}

@customElement('lit-gauge-ring')
export class LitGaugeRing extends LitElement {
    @property({type: String}) chartId: string = 'lit-gauge-ring-chart';
    @property({type: String}) width: string = '800px';
    @property({type: String}) height: string = '600px';
    @property({type: Number}) thick: number = 1;
    @property({type: Array}) gaugeData: any[] = [];

    getSeries(): any[] {
        return [
            {
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: this.thick,
                        borderColor: '#464646'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 40 * this.thick,
                    }
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10 * this.thick,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50 * this.thick,
                },
                data: this.gaugeData,
                title: {
                    fontSize: 14 * this.thick,
                },
                detail: {
                    width: 50 * this.thick,
                    height: 14 * this.thick,
                    fontSize: 14 * this.thick,
                    color: 'inherit',
                    borderColor: 'inherit',
                    borderRadius: 20,
                    borderWidth: this.thick,
                    formatter: '{value}%'
                }
            }
        ];
    }

    option: echarts.EChartsOption = {
        series: this.getSeries()
    };

    static styles = style;

    updated(): void {
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-gauge-ring': LitGaugeRing;
    }
}